import { useState } from 'react'
import './styles.css'

export default function App() {
  // 这是一个约定俗成的写法
  const [new_task, set_new_task] = useState("hello");
  // 新增一个数组型的变量
  const [tasks, set_tasks] = useState([]);

  const task_add_handle = (event) => {
    event.preventDefault()
    // ... 是传播运算符
    const myVar: { title: string; complate: boolean; task_id : string ;} = { title: new_task, complate: false , task_id:crypto.randomUUID()};
    // 这是一个异步方法，必须要重新渲染才能得到最新值 
    // 使用回调函数的方式进行set传值，可以拿到当最新的值
    set_tasks([...tasks, myVar])
    console.log(tasks)
    // 提交后置空处理
    set_new_task("")
  }

  const task_change = (task_id, checked_status) => {
    set_tasks(current_tasks => {
      return current_tasks.map(task => {
        if(task.task_id === task_id){
          task.complate = checked_status
          return task
        }
        return task
      })
    })
  }
  console.log(tasks)
  const task_delete = (task_id) => {
    set_tasks((current_tasks => {
      return current_tasks.filter((task) => {
        return task.task_id !== task_id 
      })
    }))
  }
  // 列表的标签,标签实际上是react function component
  return (
    // htmlFor 设置label和input的绑定关系，点击label可以激活input插件
    // btn btn-danger这个地方引用了样式的颜色
    /**
     * fragmant 语法要求只是在函数中输出一根节点，没有引入新节点又避免了语法错误
     */
    <>
      <form onSubmit={task_add_handle} className='new-item-form'>
        <div className="form-row">
          {/* htmlFor="itemxxx" 设置了lable和input的绑定关系 */}
          <label htmlFor="itemxxx">bind_item</label>
          {/* 将input的值和new_task进行绑定,当改变输入框时new_task也会更新 */}
          <input type="text" id='itemxxx' value={new_task} onChange={(event) => { set_new_task(event.target.value) }} />
        </div>
        {/* 花括号可以直接添加进来js的语法，用花括号圈起来后变量更新值也会更新，否则会是字符串 */}
        {new_task}
        <button className="btn">add</button>
      </form>
      <h1 className="header">Todo List</h1>
      {/* 布尔值的短路效应可以生成一个新的Title */}
      {tasks.length === 0 && <div>No Todo</div>}
      <ul className="list">
        {/* 这里map的回调函数会默认返回一个li的标签，默认有return */}
        {tasks.map((task) =>
        // react要求生成的每个节点要有差异，给li添加上一个key标签，否则会有警告出现
          <li key={task.task_id}>
            <label>
              <input type="checkbox" checked={task.complate} onChange={(event) => task_change(task.task_id,event.target.checked)}/> {task.title}
            </label>
            <button onClick={()=> task_delete(task.task_id)} className="btn btn-danger">delete</button>
          </li>
        )}
      </ul>
    </>
  )
}